<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
  #app{
    position: relative;
  }
  .a{
    /* float: left; */
    width: 300px;
    height: 50px;
    background-color: chocolate;
    border: 1px solid black;
    display: inline-block;
  }
  .b{
    background-color: tomato;
  }
  .social{
  
    width: 300px;
    position: relative;
    left:0px;
    top: 0px;
  }
 /*  .art{
   
  } */
</style>
<body>
  <div id="app">
    
       <div class="a" @click="a">
      社会新闻
       </div>
         
    
   
   

  <div class="a b" @click="b" class="art">
      娱乐新闻
    </div>  
    <div v-if="type === 'a'" class="social">
      <p>社会新闻</p> 
      <p>大事件</p> 
    </div>
      <div v-if="type ==='b' "> 
      <p>娱乐新闻</p>
      <p>小破事</p>
     </div>
    

    

    

    
  </div>
  <script>
    let vm = new Vue({
      el:'#app',
      data() {
        return {
          type:'',
      
        }
      },
      methods: {
        a(){
          // console.log(this.type);
          this.type = 'a';
          console.log(this.type);
        },
        b(){
          // this.type ='';
          this.type ="b";
        },
   
      },
    })
  </script>
</body>
</html>